{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Article Detail</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{% static 'css/button.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/footer.css' %}">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="{% static 'js/button.js' %}"></script>

    <!-- 引入monikai.css -->
    <link rel="stylesheet" href="{% static 'md_css/monokai.css' %}">

</head>

<!-- 导航栏 -->
<div class="container" style="margin-top:15px">

    <nav class="navbar navbar-expand-sm bg-secondary navbar-light">

        <a class="navbar-brand" href="{% url 'article:index' %}">IBLOG</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">{{ article.art_title }}-详情</a>
            </li>
        </ul>
        <!-- 这个 div 加上 justify-content-end 样式即可 -->
        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
            <ul class="navbar-nav" id="headerNav">
                {% if article.author == request.user %}
                    <a href="{% url 'article:update_art' article.id %}" class="btn btn-info" role="button">编辑</a>
                    <a href="#" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal"
                       role=" button">删除</a>
                    <a href="#" class="btn btn-light" role="button">私密</a>
                {% endif %}
                &emsp;
            </ul>
        </div>
    </nav>
</div>


<div class="container">
    <div class="row">
        <!-- 标题及作者 -->
        <h2 class="col-12 mt-4 mb-4">{{ article.art_title }}</h2>
        <div class="col-12 alert alert-success">
            Author：{{ article.author }} &emsp;&emsp; Datetime：{{ article.created_time }} &emsp;&emsp;
            Update_time：{{ article.updated_time }}
        </div>
        <!-- 文章正文 -->
        <div class="col-12">
            <p>{{ article.art_body|safe }}</p>
        </div>
    </div>
</div>


<!-- 发表评论 -->
<hr>
<div class="container">

    {% if user.is_authenticated %}
        <div>
            <form action="{% url 'comment:add_comment' article.id %}" method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <label for="body">
                        <strong>
                            我也要发言：
                        </strong>
                    </label>
                    <textarea type="text" class="form-control" id="body" name="com_body" rows="2"></textarea>
                </div>
                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary ">发送</button>
            </form>
        </div>
        <br>
        <br>

    {% else %}
        <h5 class="row justify-content-center">
            请<a href="{% url 'bloguser:user_login' %}">登录</a>后回复
        </h5>
    {% endif %}



    <!-- 显示评论 -->
    <h4>共有{{ comments.count }}条评论</h4>
    <div>
        {% for comment in comments %}
            <hr>
            <p>
            <span style="color: pink">
                {{ comment.user.author_name }}
            </span>
                在
                <span style="color: green">{{ comment.created_time }}</span> 时说：
            </p>
            <pre style="font-family: inherit; font-size: 1em;">
            {{ comment.com_body }}</pre>
        {% endfor %}
    </div>


    <!-- 删除弹窗Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">您在执行删除操作</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    你确定要删除这篇文章吗？此操作不可恢复
                </div>
                <div class="modal-footer">
                    <a href="{% url 'article:del_article' article.id %}" onclick="javascript:return del_success()"
                       class="btn btn-danger"
                       role="button">确定</a>
                    <a href="#" class="btn btn-info" role="button" data-dismiss="modal">取消</a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 向上按钮 -->
<button type="button" id="BackTop" class="toTop-arrow" style="z-index: 100;"></button>


<footer id="footer">
    <div class="container">
        <hr style="margin: 0;">
    </div>
    <nav class="navbar navbar-light mb-0" id="nav-footer" style="background-color: white">

        <div class="row col-12 justify-content-center font-size-xs">
            <div style="text-align: center; color: black;">
                <div class="mb-0">
                    <div id="show_time0">
                        <script>
                            setInterval("show_time0.innerHTML='CopyRight © 2019 ~'+new Date().getFullYear();", 1000);
                        </script>
                    </div>
                    ZXY iblog
                </div>
                <p class="mb-0">Powered by
                    <span class="mb-0">&nbsp;<a href="https://beian.miit.gov.cn/">豫ICP备20007445号</a></span>
                </p>
            </div>
        </div>
        </div>
    </nav>
</footer>

</body>

</html>
<script>
    function del_success() {
        alert('删除成功!!!')
    }
</script>

</body>

</html>